<template>
  <div class="my-tag">
    <input
      v-if="isShow"
      v-focus
      :value="value"
      class="input"
      type="text"
      placeholder="输入标签"
      @blur="isShow = false"
      @keyup.enter="changeTag"
    />
    <div class="text" v-else @dblclick="isShow = true">{{ value }}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods:{
    changeTag(e){
        if(e.target.value.trim() === ''){
            alert('输入内容不能为空')
            return
        }
        this.isShow = false
        this.$emit('input',e.target.value)
        
    }
  }
};
</script>

<style></style>
